<template>
  <div>
    <hs-breadcrumb :breadcrumb="breadcrumb"></hs-breadcrumb>
    <Card :bordered="false" :style="{ marginBottom: '10px' }">
      <div class="hs-screen-row">
        <Input
          v-model="params.goodsName"
          placeholder="商品名称"
          clearable
          style="width: 200px"
        />
      </div>

      <div class="hs-screen-row">
        <Select
          v-model="params.isUpShelf"
          placeholder="上架状态"
          clearable
          style="width:200px"
        >
          <Option value="">全部</Option>
          <Option value="0">下架</Option>
          <Option value="1">上架</Option>
          <Option value="2">待上架</Option>
        </Select>
      </div>
      <div class="hs-screen-row">
        <DatePicker
          @on-change="changeDate"
          v-model="dateInit"
          type="daterange"
          :editable="false"
          separator=" ~ "
          split-panels
          transfer
          placeholder="创建时间"
          style="width: 200px"
        ></DatePicker>
      </div>
      <div class="hs-screen-row">
        <Button type="primary" @click="findList">查询</Button>
      </div>
      <div class="hs-screen-row">
        <Button @click="resetScreen">重置</Button>
      </div>
    </Card>

    <Card :bordered="false" :style="{ marginBottom: '10px' }">
      <!--标题-->
      <div slot="title">
        <div class="hs-screen-box">
          <div>商品列表</div>
          <div>
            <ButtonGroup>
              <Button @click="findList">
                <Icon type="md-refresh" size="15" />
              </Button>
              <Button @click="weixinOpeHandle(2)">新增商品</Button>
            </ButtonGroup>
          </div>
        </div>
      </div>

      <div style="margin-bottom: 10px">
        <Button type="dashed" @click="batchOpe(1)">批量上架</Button>
        <Button style="margin-left: 10px" type="dashed" @click="batchOpe(0)">
          批量下架
        </Button>
      </div>
      <!--表格数据-->
      <Table
        :columns="columns"
        :data="data"
        size="small"
        :stripe="true"
        :loading="isTableLoading"
        @on-select="selectTable"
        @on-select-cancel="selectCancelTable"
        @on-select-all="selectAllTable"
        @on-select-all-cancel="selectAllCancelTable"
      >
        <template slot-scope="{ row, index }" slot="isUpShelf">
          <Tag color="default" v-if="row.isUpShelf === 0" size="default">
            下架
          </Tag>
          <Tag color="green" v-if="row.isUpShelf === 1" size="default">
            上架
          </Tag>
          <Tag color="volcano" v-if="row.isUpShelf === 2" size="default">
            待上架
          </Tag>
        </template>
        <template slot-scope="{ row, index }" slot="serviceCode">
          <span
            v-for="(item, index) in serviceCodeList"
            v-if="row.serviceCode == item.value"
            :key="index"
          >
            {{ item.text }}
          </span>
        </template>

        <template slot-scope="{ row }" slot="action">
          <Button
            type="success"
            size="small"
            style="margin-right: 5px"
            @click="weixinOpeHandle(1, row)"
          >
            查看
          </Button>
          <Button
            type="primary"
            size="small"
            style="margin-right: 5px"
            @click="weixinOpeHandle(3, row)"
          >
            编辑
          </Button>

          <Dropdown transfer trigger="click">
            <Button size="small">
              <Icon type="ios-more" size="22" />
            </Button>
            <DropdownMenu slot="list">
              <DropdownItem
                v-if="row.isUpShelf === 0"
                @click.native="singleOpe(row)"
              >
                上架
              </DropdownItem>
              <DropdownItem
                v-if="row.isUpShelf === 1"
                @click.native="singleOpe(row)"
              >
                下架
              </DropdownItem>
              <DropdownItem
                v-if="row.isUpShelf === 2"
                @click.native="singleOpe(row)"
              >
                上架
              </DropdownItem>

              <DropdownItem @click.native="isDelUser(row)">删除</DropdownItem>
            </DropdownMenu>
          </Dropdown>
        </template>
      </Table>
      <!--分页-->
      <div class="hs-page">
        <Page
          :total="total"
          show-sizer
          show-total
          transfer
          @on-change="changePage"
          @on-page-size-change="changePageSize"
        />
      </div>
    </Card>
    <weixin-ope ref="weixinOpeRef" @changeDate="findList"></weixin-ope>
  </div>
</template>

<script>
  import hsBreadcrumb from '@/components/hs-breadcrumb';
  import weixinOpe from './components/weixin-ope.vue';
  import { serviceCodeList } from '@/constant/program';

  export default {
    data() {
      return {
        serviceCodeList,
        total: 0,
        dateInit: '',
        isTableLoading: false,
        // 参数
        params: {
          page: 1,
          rows: 10,
          goodsName: '',
          freightRule: '',
          goodsTypeName: '',
          goodsType: [],
          isUpShelf: '',
          startTime: '',
          endTime: '',
          isToKs: ''
        },
        // 商品上下架参数
        upAndDownParams: {
          goodsMallIdList: '',
          isUpShelf: ''
        },
        upGoodsParams: {},
        // 选中数据
        selectData: [],
        // 表格列
        columns: [
          {
            type: 'selection',
            width: 60,
            align: 'center'
          },
          {
            type: 'index',
            width: 60,
            align: 'center'
          },
          {
            title: '商品ID',
            minWidth: 120,
            key: 'goodsMallId'
          },
          {
            title: '商品名称',
            minWidth: 280,
            key: 'goodsName',
            ellipsis: true
          },
          {
            title: '售价',
            minWidth: 100,
            key: 'price',
            ellipsis: true
          },
          {
            title: '类型',
            slot: 'serviceCode',
            align: 'center',
            width: 120
          },
          {
            title: '状态',
            slot: 'isUpShelf',
            align: 'center',
            width: 120
          },
          {
            title: '创建时间',
            key: 'createTime',
            width: 150
          },
          {
            title: '操作',
            slot: 'action',
            width: 180,
            align: 'center'
          }
        ],
        // 表格数据
        data: [],
        // 面包屑
        breadcrumb: [
          { name: '首页', url: '', icon: 'ios-home-outline', size: 18 },
          { name: '商品管理', url: '', icon: '', size: 0 },
          { name: '微信商品管理', url: '', icon: '', size: 0 }
        ]
      };
    },
    created() {
      // 商品-列表查询
      this.findList();
    },
    mounted() {},
    methods: {
      // 商品-列表查询
      findList() {
        this.isTableLoading = true;
        this.axios
          .post('/goodsMall/findList', { ...this.params, plantType: 4 })
          .then(res => {
            this.isTableLoading = false;
            if (res.status == 200) {
              this.total = res.data.total;
              this.data = res.data.rows;
            }
            if (res.status == 201) {
              this.$Message.error(res.msg);
            }
            if (res.status == 500) {
              this.$Notice.error({
                title: '服务器内部错误',
                desc: '查询商品列表接口报错',
                duration: 0
              });
            }
          });
      },

      // 商品-上下架商品
      upShelfGoods() {
        this.axios
          .post('/goodsMall/upShelfGoods', this.upAndDownParams)
          .then(res => {
            console.log(res);
            if (res.status == 200) {
              this.$Message.success('操作成功.');
              this.findList();
            }
            if (res.status == 201) {
              this.$Message.error(res.msg);
            }
            if (res.status == 500) {
              this.$Notice.error({
                title: '服务器内部错误',
                desc: '上下架商品接口报错',
                duration: 0
              });
            }
          });
      },
      // 是否删除商品
      isDelUser(row) {
        // console.log(row)
        this.$Modal.confirm({
          title: `是否删除商品${row.goodsName}?删除不影响已购买用户的权益。`,
          onOk: () => {
            // this.$Message.info('您点击了确定.');
            this.deleteGoods(row);
          },
          onCancel: () => {
            // this.$Message.info('您点击了取消.');
          }
        });
      },
      // 删除商品
      deleteGoods(row) {
        this.$Spin.show();
        this.axios
          .post('/goodsMall/deleteGoods', {
            goodsMallId: row.goodsMallId
          })
          .then(res => {
            console.log(res);
            setTimeout(() => {
              this.$Spin.hide();
            }, 300);
            if (res.status == 200) {
              this.$Message.success('操作成功.');
              this.findList();
            }
            if (res.status == 201) {
              // this.$Message.error(res.msg);
              this.$Notice.error({
                title: '删除商品失败',
                desc: res.msg
              });
            }
            if (res.status == 500) {
              this.$Notice.error({
                title: '服务器内部错误',
                desc: '删除商品接口报错',
                duration: 0
              });
            }
          });
      },
      // 选中商品
      selectGoodsType(value, selectedData) {
        if (selectedData.length) {
          this.params.goodsTypeName = selectedData[2].label;
        } else {
          this.params.goodsTypeName = '';
        }
      },
      // 显示操作模态框
      showGoodsOpe(type, row) {
        /**
         * type判断
         * 1.查看 2.新增 3.编辑
         */
      },
      // 日期条件赋值
      changeDate(e) {
        this.params.startTime = e[0];
        this.params.endTime = e[1];
      },
      // 重置筛选条件
      resetScreen() {
        this.params.goodsName = '';
        this.params.freightRule = '';
        this.params.goodsTypeName = '';
        this.params.goodsType = [];
        this.params.isUpShelf = '';
        this.params.startTime = '';
        this.params.endTime = '';
        this.dateInit = '';
      },
      // 改变页数
      changePage(e) {
        this.params.page = e;
        this.findList();
      },
      // 改变页容量
      changePageSize(e) {
        this.params.rows = e;
        this.findList();
      },
      // 在多选模式下有效，选中某一项时触发
      selectTable(selection, row) {
        this.selectData = selection;
      },
      // 在多选模式下有效，取消选中某一项时触发
      selectCancelTable(selection, row) {
        this.selectData = selection;
      },
      // 在多选模式下有效，点击全选时触发
      selectAllTable(selection) {
        this.selectData = selection;
      },
      // 在多选模式下有效，点击取消全选时触发
      selectAllCancelTable(selection) {
        this.selectData = selection;
      },
      weixinOpeHandle(type, row) {
        this.$refs.weixinOpeRef.show(type, row);
      },
      // 上下架商品
      singleOpe(row) {
        this.upAndDownParams.goodsMallIdList = row.goodsMallId;
        if (row.isUpShelf == 1) {
          this.upAndDownParams.isUpShelf = 2;
        } else {
          this.upAndDownParams.isUpShelf = 1;
        }

        this.upShelfGoods();
      },
      // 批量上下架商品
      batchOpe(type) {
        if (!this.selectData.length) {
          this.$Message.error('至少选择一个商品');
          return false;
        }
        let arr = [];
        this.selectData.forEach(v => {
          arr.push(v.goodsMallId);
        });
        this.upAndDownParams.goodsMallIdList = arr.join(',');
        this.upAndDownParams.isUpShelf = type;
        this.$Modal.confirm({
          title: `确定${type == 0 ? '下架' : '上架'}选中的商品？`,
          onOk: () => {
            // this.$Message.info('您点击了确定.');
            this.upShelfGoods();
          },
          onCancel: () => {
            this.$Message.info('您点击了取消.');
          }
        });
      }
    },
    components: {
      hsBreadcrumb,
      weixinOpe
    }
  };
</script>

<style scoped></style>
